不過，除了在參數傳遞路由之外，還有一種情況是在母路由之外，還有子路由需要被切換，這種狀況我們稱作巢狀路由。

若要設定巢狀路由，可以透過children屬性:

{
  path: '/About',
  component: About,
  children: [
    {
      path: 'Info',
      component: Info
    },
    {
      path: 'Contact',
      component: Contact
    },
  ]
}

不過要小心 children 裡面的 path 不要加上 / 開頭，否則會被帶回根目錄。
我們也可以搭配參數進行巢狀路由切換:

{ 
    path: "/users/:userId", 
    component: User, 
    children: [ 
       { 
        path: 'posts', 
        component: Post, 
        }, 
   ] 
}

假設我們在網址列 xxx/users/1/ 就可以看到 1 號使用者的資訊， 進入路由之後，你會發現網址此時變成 xxx/users/1/posts

原始碼可參考:
https://codesandbox.io/s/route-params-vue-router-4-with-dynamic-router-forked-r2et6?from-embed=&file=/src/router.js

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#